<template>
  <div class="container">
    <div class="container1">
      <el-form :model="formData"  label-width="80px"  >
       <el-row>
         <el-col :span="6">
        <el-form-item label="标签名称">
          <el-input placeholder="请输入" size="small" style='width:100%' v-model="formData.tags" />
        </el-form-item>
         </el-col>

          <el-col :span="6">
        <el-form-item label="城市">
          <el-select v-model="formData.province" placeholder="请选择" size="small"  @change="getdata()" style='width:100%;'>
             <el-option v-for="item in provinces" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
          </el-col>

          <el-col :span="6">
        <el-form-item label="地区">
          <el-select v-model="formData.city" placeholder="请选择" size="small" style='width:100%;'>
               <el-option v-for="item in citys" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
          </el-col>

          <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input placeholder="请输入" size="small" v-model="formData.shortName" style='width:100%;'/>
        </el-form-item>
          </el-col>

           <el-col :span="6" >
            <el-form-item label="状态">
              <el-select v-model="formData.state" placeholder="请选择" size="small" style='width:100%;' >
                 <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6" >
            <el-form-item>
              <el-button size="small" @click="onDelete">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </el-form-item>
           </el-col>
           <el-col :span="12" style="text-align: right;">
            <el-form-item>
              <el-button type="success" size="small" icon="el-icon-edit" @click=" showFormDialog = true">新增用户</el-button >
            </el-form-item>
          </el-col>
          </el-row>
      </el-form>

      <el-alert title="" type="info" show-icon :closable="false"   style="margin-bottom:20px">
        <span slot="title">共{{ counts }}条记录</span>
      </el-alert>

      <el-table :data="tabledata" style="width: 100%" :header-cell-style="headerStyle">
        <el-table-column label="序号" align="center" type="index" :index="indexMethod" />
        <el-table-column label="企业编号" align="center" prop="number"   width="200" />
        <el-table-column label="企业简称" align="center" prop="shortName" width="80" />
        <el-table-column label="标签" align="center" prop="tags" width="60"  />
        <el-table-column label="创建者" align="center" prop="creatorID" width="80"/>
        <el-table-column label="创建日期" align="center" prop="addDate" width="200">
          <template v-slot={row}>
            {{row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remarks"  width="150"/>
        <el-table-column :formatter="formatconstants" prop="state" label="状态" align="center" />
        <el-table-column label="操作" fixed="right" width="160" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" icon="el-icon-edit" plain circle @click="UpdateById(row.id)"/>
            <el-button :type="row.state ? 'warning' : 'success'" size="small" :icon="row.state ? 'el-icon-close' : 'el-icon-check'" plain circle @click="changebtn(row)" />
            <el-button type="danger" size="small" icon="el-icon-delete" plain circle @click="btndelete(row.id)"/>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" class="row">
        <el-pagination :current-page="companypage.page" :page-sizes="[5,10, 20, 30, 50]" :page-size="companypage.pagesize" background layout="prev,pager,next,sizes,jumper" :total="counts" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
      </el-row>
       <CompanysAdd ref= "userDialogRef" :showFormDialog="showFormDialog" @update-list="updateList" @LoadList ="LoadList"/>
    </div>
  </div>
</template>

<script>
import { list, remove, disabled } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
import CompanysAdd from '../components/companys-add.vue'
import { status } from '@/api/hmmm/constants'
export default {
  components: {
    CompanysAdd
  },
  data () {
    return {
      companypage: {
        page: 1,
        pagesize: 10
      },
      counts: 0,
      tabledata: [],
      formData: {
        tags: '',
        city: '',
        province: '',
        shortName: '',
        state: ''
      },

      provinces,
      citys,
      showFormDialog: false,
      useId: null,
      status
    }
  },
  mounted () {
    this.LoadList()
    this.provinces = provinces()
  },
  methods: {
    // 获取企业列表
    async LoadList () {
      const {
        data: { counts, items, page, pagesize }
      } = await list(this.companypage)
      this.tabledata = items
      this.counts = counts
      this.companypage.page = +page
      this.companypage.pagesize = +pagesize
    },

    // 搜索栏城市点击事件
    async getdata () {
      this.citys = await citys(this.formData.province)
      this.formData.city = this.citys[0]
    },

    // 搜索栏清除按钮
    onDelete () {
      this.formData = {}
      this.LoadList()
    },
    // 搜索按钮，点击搜索框，数据随之改变
    async  search () {
      const obj = { }
      Object.keys(this.formData).forEach(item => {
        if (this.formData[item] !== '') {
          obj[item] = this.formData[item]
        }
      })
      this.companypage.page = 1
      const res = await list({ ...obj, ...this.companypage.page })
      // console.log(res)
      this.counts = res.data.counts
      this.tabledata = res.data.items
    },
    // 分页条数
    handleSizeChange (size) {
      this.companypage.pagesize = size
      this.LoadList()
    },
    // 分页
    handleCurrentChange (page) {
      this.companypage.page = page
      this.LoadList()
    },

    // 编辑修改-用户，数据进行回显
    async UpdateById (id) {
      // 点击编辑 ，打开弹窗,获取详情
      await this.$refs.userDialogRef.getDetail(id)
      this.showFormDialog = true
    },

    // 删除按钮
    async btndelete (id) {
      try {
        await this.$confirm('此操作将永久删除用户, 是否继续?', '提示')
        await remove(id) // 调用删除数据接口
        // 刷新页面数据
        const totalPage = Math.ceil((this.counts - 1) / this.companypage.pagesize)
        if (this.companypage.page > totalPage) {
          this.companypage.page = totalPage
        }
        this.LoadList()
        this.$message.success('删除用户成功!')
      } catch (error) {
        this.$message('已取消操作')
      }
    },
    // 实现倒序
    indexMethod (index) {
      if (this.counts < this.companypage.pagesize) {
        return this.counts - index
      } else {
        return (
          this.counts - (this.companypage.page - 1) * this.companypage.pagesize - index
        )
      }
    },
    // 关闭弹层
    updateList () {
      // 关闭弹层
      this.showFormDialog = false
      this.LoadList()
    },

    // 转换状态数据的函数
    formatconstants (row, column, cellValue, index) {
      const obj = status.find(item => {
        return item.value === cellValue
      })
      return obj ? obj.label : ''
    },
    // 切换状态的按钮
    async changebtn (row) {
      try {
        await this.$confirm(`已成功${row.state === 0 ? '启用' : '禁用'},是否继续`, '提示', { type: 'warning' })
        this.$message.success(`已成功${row.state === 0 ? '启用' : '禁用'}了用户!`)
        this.tabledata.state = row.state === 1 ? 0 : 1
        await disabled({ id: row.id, state: this.tabledata.state })
        this.LoadList()
      } catch {
        this.$message('已取消操作')
      }
    },
    // 表头行样式
    headerStyle () {
      return 'border-bottom: 3px solid #e8e8e8;background-color: #fafafa;'
    }
  }

}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  .container1 {
    background-color: #fff;
    padding: 20px;
    .row{
      margin-top: 20px;
    }
  }
}
</style>
